<template>
  <div>
    <div class="orderList" v-show="isShowOrderLi">
      <li class="orderItem" v-for="item of orderList" :key="item.id">
        <span class="order_type">{{item.order_content.optimize_name}}</span>
        <span class="order_price">{{item.money}}元</span>
        <span class="order_status" v-if="item.status === 1">未支付</span>
        <span class="order_status" v-if="item.status === 2">已支付</span>
        <span class="order_action animate__animated animate__tada animate__slow animate__infinite" @click="goPay(item.id)" v-if="item.status===1">去支付</span>
        <span class="order_action paySucc animate__animated animate__bounceIn animate__slow animate__infinite" @click="goFind()" v-if="item.status===2">去查看</span>
      </li>
    </div>
    <div class="isPayLayer" v-show="isPayLayer === '1'"></div>
    <div class="content animate__animated animate__fadeIn" v-show="isPayLayer === '1'">
      <h2>请确认微信支付是否已完成</h2>
      <button @click="payed">支付完成</button>
      <button @click="rePay" class="pay-err">支付遇到问题？</button>
    </div>
    <div class="openOtherBrowserLayer" @click.self="false" v-show="isShowObl">
      <img src="@/assets/img/arrow.png" class="animate__animated animate__pulse animate__infinite" alt="">
      <div class="tip">
        <p>点击右上角的按钮</p>
        <p>选择在浏览器中打开</p>
      </div>
    </div>
  </div>
</template>

<script>
import {goPay, GetOrderList, queryOrder} from "../api";

export default {
  name: 'OrderList',
  data () {
    return {
      isShowOrderLi: false,
      isShowObl: false, // 是不是显示打开其它浏览器layer
      orderList: [],
      isPayLayer: sessionStorage.getItem('isPayLayer') || '0' // 用户手动确认弹框
    }
  },
  methods: {
    // 支付
    goPay (orderId) {
      this.isShowObl = false // 关闭引导层
      goPay(orderId).then(res => {
        sessionStorage.setItem('orderId', orderId)
        const wxUrl = res.mweb_url
        window.location.href = wxUrl
        sessionStorage.setItem('isPayLayer', '1')
      })
    },
    // 循环订单列表
    loopOrderList () {
      GetOrderList().then(res => {
        if (res) {
          this.isShowOrderLi = true
          this.orderList = res
        }
      })
    },
    // 查看已支付
    goFind () {
      this.Dialog.alert({
        title: '支付成功',
        message: '稍后有专业指导老师联系您，或联系王老师: 15310065192'
      })
    },
    // 查询订单, 用户点击已完成支付
    payed () {
      sessionStorage.removeItem('isPayLayer')
      const orderId = sessionStorage.getItem('orderId')
      queryOrder(orderId).then(res => {
        if (res) {
          this.Notify({type: 'success', message: '支付成功'})
        } else {
          this.Notify({type: 'danger', message: '支付失败'});
        }
      }).catch(() => {
        this.Notify('支付遇到点问题')
      })
      this.isPayLayer = '0' // 关闭用户手动确认弹框
    },
    // 用户手动点击重新支付，关闭弹层
    rePay () {
      this.isPayLayer = '0'
    }
  },
  mounted () {
    // 判断浏览器
    const ua = navigator.userAgent.toLowerCase();
    // eslint-disable-next-line eqeqeq
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      // 在微信
      this.isShowObl = true
    }
    this.loopOrderList()
  }
}
</script>

<style lang="scss" scoped>
.orderList {
  position: fixed;
  width: 60%;
  background: rgba(0, 0, 0, .8);
  top: 66%;
  transform: translateY(-50%);
  left: 0;
  padding: 10px 5px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  max-height: 30%;
  overflow: auto;

  .orderItem {
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    color: #ffffff;
    font-weight: 300;
    font-style: italic;

    .title {
      font-style: normal;
      color: #61e2f3;
      font-weight: 500;
    }

    .order_type {

    }

    .order_price {
      color: #61e2f3;
    }

    .order_status {

    }

    .order_action {
      background: #64bac9;
      color: #ffffff;
      padding: 3px 5px;
      border-radius: 6px;

      &.paySucc {
        background: #1c73d6;
      }
    }
  }
}

.isPayLayer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  transition: 0.4s linear;
  font-size: 14px;
  text-align: center;
  opacity: .7;
}

.content {
  position: fixed;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 150px;
  background: #ffffff;
  font-size: 14px;
  text-align: center;
  border: 1px solid #333333;
  z-index: 99;
  border-radius: 12px;

  h2 {
    padding: 15px 0;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid #333333;
  }

  button {
    padding: 12px 20px;
    margin-right: 22px;
    margin-top: 25px;
    background: #70b62f;
    border: none;
    outline: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;

    &:last-child {
      margin-right: 0;
    }
  }

  .pay-err {
    background: #da332e;
  }
}

.openOtherBrowserLayer {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #000000;
  opacity: .9;
  z-index: 9999;
  left: 0;
  top: 0;

  img {
    position: absolute;
    top: 0;
    right: 26px;
    width: 80px;
  }

  .tip {
    position: absolute;
    top: 80px;
    font-size: 22px;
    font-weight: 500;
    left: 40%;
    color: #ffffff;
    line-height: 1.3em;
  }
}
</style>
